<template>
  <view class="root">
    <view class="content">

      <view class="list-item-wrapper">
        <view class="imei-name">
          <view class="i-left">
            <view class="dot">
            </view>
            IMEI码:{{details.imei}}
          </view>
          <view class="i-right" @click="handleRemove(details)">
            解绑设备
          </view>
        </view>
        <view class="i-item-style">
          <view class="i-left-item">
            <image :src="baseImgUrl + 'watch-01.png'" class="img-v"></image>
          </view>
          <view class="i-right-item">
            <view class="list-item">
              <view class="list-label">
                SIM卡号:
              </view>
              <view class="list-value">
                {{details.simNumber || '暂无'}}
              </view>
            </view>
            <view class="list-item">
              <view class="list-label">
                设备状态:
              </view>
              <view class="list-value">
                {{details.onLine === '1' ? '在线' : '离线'}}
              </view>
            </view>
            <view class="list-item">
              <view class="list-label">
                设备电量:
              </view>
              <view class="list-value">
                {{details.remainingPower || '暂无'}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    Toast,
    getOptionsParams,
    isLoading,
    navBack,
    navTo,
  } from '@/utils/util.js'
  import moment from '@/utils/moment'
  import {
    getAction
  } from '../utils/request'
  import {
    helpinfoBingding
  } from '../api/api'


  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        scrllViewRef: null,
        searchValue: '',
        inputStyles: {
          background: '#f8f8f8',
          borderRadius: '340rpx 340rpx 340rpx 340rpx',
          border: '1rpx solid #F1F2F3',
        },
        staticParams: {},
        options: {},
        routerParams: {},
        details: {}
      }
    },
    onLoad(options) {
      this.options = options
      this.routerParams = getOptionsParams(options)
      this.initData()
    },
    onUnload() {
      uni.$off('secondHandMobileAddNew')
    },
    methods: {
      moment,
      input(val) {
        Object.assign(this.staticParams, {
          likeName: this.searchValue ? this.searchValue.trim() : '',
        })
        this.$refs.scrllViewRef.getList('init', this.staticParams)
      },
      initData() {
        isLoading(true)
        getAction('/mini/wb/helpinfo/deviceDetails', {
            mentalPatientPersonId: this.routerParams.id
          })
          .then((res) => {
            this.details = res.result
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleRemove(item) {
        uni.showModal({
          title: "提示",
          content: "请确认是否解绑？",
          confirmColor: "#2488F5",
          success: async (res) => {
            if (res.confirm) {
              helpinfoBingding({
                  imei: item.imei,
                  mentalPatientPersonId: this.routerParams.id,
                  type: 2
                })
                .then((res) => {
                  Toast('解绑成功！')
                  setTimeout(() => {
                    uni.$emit('bind-success')
                    uni.navigateBack({
                      delta: 2
                    })
                  }, 200)
                })
            }
          },
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #F9F9F9;


    .top {
      padding: 25rpx;
      background: #FFFFFF;

      /deep/ .is-input-border {
        background: #F8F8F8 !important;
        border-radius: 340rpx 340rpx 340rpx 340rpx !important;
        border: 1rpx solid #F1F2F3 !important;
      }
    }

    .content {
      flex: 1;
      padding: 10rpx 15rpx;
      height: 0;
    }

    .list-item-wrapper {
      padding: 32rpx;
      padding-top: 0;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 14rpx;

      .imei-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25rpx 0rpx;
        border-bottom: 1px solid #DEDCDC;
        margin-bottom: 8rpx;

        .i-right {
          padding: 8rpx 19rpx;
          background: #EBF5FF;
          border-radius: 32rpx 32rpx 32rpx 32rpx;
          border: 1rpx solid #D4EAFE;
          font-weight: 500;
          font-size: 28rpx;
          color: #469DFB;
        }
      }

      .i-item-style {
        display: flex;
        position: relative;

        .i-left-item {
          margin-right: 29rpx;

          .img-v {
            width: 189rpx;
            height: 189rpx;
          }
        }

        .i-right-item {}
      }

      .list-item-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #181818;
      }

      .list-item {
        display: flex;
        margin-top: 12rpx;

        .list-label {
          font-weight: 500;
          flex-shrink: 0;
          font-size: 28rpx;
          color: #999999;
          margin-right: 5rpx;
          width: 120rpx;
        }

        .list-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #101010;
        }
      }
    }

    .bottom {}
  }
</style>